<template>
  <div>
    <div class="werapp">
      <div class="top-item">
        <h1>订单管理</h1>
      </div>
      <div class="btn-item">
        <el-select v-model="value" placeholder="按订单号查询">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="values" placeholder="关键字"></el-input>
        <el-button @click="search">查询</el-button>
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="orderNo" label="订单号" width="180">
          <template slot-scope="scope">
            <a href="javascript:;;" @click="handleEdit(scope.$index, scope.row)"
              >{{scope.row.orderNo}}</a
            >
          </template>
        </el-table-column>
        <el-table-column prop="receiverName" label="收件人" width="180">
        </el-table-column>
        <el-table-column prop="statusDesc" label="订单状态"> </el-table-column>
        <el-table-column prop="payment" label="订单总价"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { order, ordersearch } from "../../api/index";
export default {
  data() {
    return {
      options: [
        {
          value: "orderNo",
          label: "按订单号查询",
        },
      ],
      values: "",
      value: "",
      type: "",
      listsearch: "",
      totalsearch: "",
      list: [],
      total: 0,
      pagesize: 5,
      pagenum: 1,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // 搜索
    // search(){
    //     if(this.values){
    //         this.list=this.list.filter((c)=>{
    //             return c.name.includes(this.values)
    //         })
    //     }
    //     // this.getdata()
    // },
    search() {
      ordersearch({
        pageNum: this.pagenum,
        orderNo: this.values,
      }).then((res) => {
        if (res.status === 1) {
          alert(res.msg);
        } else {
          this.list = res.data.list;
        }
        console.log(res);
      });
    },
    // 渲染
    getdata() {
      order({ pageSize: this.pagesize, pageNum: this.pagenum })
        .then((res) => {
          console.log(res);
          this.list = res.data.list;
          this.total = res.data.total;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.getdata();
    },
    // 查看
    handleEdit(index, row) {
      console.log(index, row);
      if (row.orderNo) {
        this.$router.push({
          path: "/order/detail",
          query: {
            data: row.orderNo,
          },
        });
      } else {
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  padding: 15px 30px;
  .top-item {
    display: flex;
    justify-content: space-between;
  }
  .btn-item {
    display: flex;
    & >>> .el-input__inner {
      width: 200px;
    }
    .el-input {
      width: 200px;
    }
  }
}
</style>